<template>
	<view class="SRV-status" :style="'width: ' + getpx(size) +'px; height:' + getpx(size) +'px; border-radius: 50%; border: '+  getpx(boder) +'px '+ color +' solid;'">
		
		<view class="upboder" :style="''
		+ 'left:calc(8% - '+  getpx(boder*0.7) +'px); '
		+ 'top: calc(8% - '+  getpx(boder*0.7) +'px); '
		+ 'border-top: '+  getpx(boder*0.7) +'px '+ color +' solid; '
		+ 'border-left: '+  getpx(boder*0.7) +'px #fff solid; ' 
		+ 'border-right: '+  getpx(boder*0.7) +'px #fff solid; '
		+ 'border-bottom: '+  getpx(boder*0.7) +'px '+ color +' solid; '"></view>
		
		
		<view class="downboder" :style="'color:'+ color +'; font-size:'+ getpx(fontSize*0.3) +'px; line-height: '+ getpx(fontSize*0.5) +'px;'">
			<text>CZSD</text>
			<text>超圳时代</text>
		</view>
		
		
		<view class="centerb" :style="'font-size:'+ getpx(fontSize) +'px; color:'+ color +'; line-height: '+ getpx(size) +'px;'">
		{{name}}
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"show-status",
		props: {
			name: {
				// 状态文字
				type: String,
				default: "GOOD"
			},
			
			size: {
					//元件大小,单位px,自动计算成rpx
					type: [Number, String],
					default: 200
				},
				
			fontSize: {
				//文字大小,单位px,自动计算成rpx
					type: [Number, String],
					default: 50
			},
			
			boder: {
				// 边框,单位px,自动计算成rpx
				type: [Number, String],
				default: 5
			},
			
			color: {
				// 颜色
				type: String,
				default: "#00aa00"
			}
			
		},
		
		methods: {
			getpx(x){// 计算 upx to px
				return uni.upx2px(parseInt(x)); 
			},
		}
		
	}
</script>

<style lang="scss">
	.SRV-status {
		
		
		position: relative;
		 
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		text-align: center;
		font-weight: bold; 
		
		opacity: 0.6;
		transform: rotate(330deg);
		-webkit-transform: rotate(330deg);
		
		.upboder{
			
			width: 84%;
			height: 84%;
			
			position: absolute;
			border-radius: 50%;
			
			
		}
		
		.downboder{
			width: 70%;
			height: 70%;
			
			position: absolute;
			left:15%;
			top: 15%;
			
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			
			text-align: center; 
		}
		
		.centerb{
			width: 100%;
			height: 100%;
			
			position: absolute;
			left:0;
			top: 0;
			
			text-align: center;
			
			
		}
		
		
		
	}

</style>
